<template>
  <view class="mine">
    <!-- 盒子1 -->
    <!-- <button @click="chooseLocation()">location</button> -->
    <view class="user1">
      <view class="head">
        <view @click="chooseImg">
          <image :src="url" style="width: 50px;height:50px;
        border-radius: 50%;border:1px solid #3EB06F;margin-right:10px;"></image>
          <view>
            <text style="font-weight: bold;font-size:18px;">风味茄子001</text><br />
            <view style="margin-top: 8px;">
              <text style="color:white;background-color:#3EB874;border-radius:5px;
              padding:5px;font-size:12px;">普通用户</text>
            </view>
          </view>
        </view>
        <view>
          <image src="../../static/消息.png" style="width: 30px;height:30px;margin-top:10px;"></image>
        </view>
      </view>
      <view class="center">
        <text style="font-size:15px;font-weight:bold;margin-right:10px;margin-left:10px;
        ">会员中心</text>| 首次开会员，领取66元专享红包!
        <ul-button style="color:#6CC393;background-color: white;border-radius: 10px;
        font-size:12px;padding:5px;margin-left:10px;
        ">立即开通</ul-button>
      </view>
      <view class="number">
        <view class="fix">
          <view style="text-align:center">
            <text style="color:#36AE6B">￥<text style="font-size: 20px;font-weight: bold;">0</text></text><br/>
            <text style="font-weight: bold;">余额</text>
          </view>
          <view style="text-align:center">
            <text style="color:#36AE6B;"><text style="font-size: 20px;font-weight: bold;">3</text></text><br/>
            <text style="font-weight: bold;">优惠券</text>
          </view>
          <view style="text-align:center">
            <text style="color:#36AE6B;"><text style="font-size: 20px;font-weight: bold;">0</text></text><br/>
            <text style="font-weight: bold;">金额</text>
          </view>
          <view style="text-align:center">
            <text style="color:#36AE6B">￥<text style="font-size: 20px;font-weight: bold;">4</text></text><br/>
            <text style="font-weight: bold;">收益</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 盒子2 -->
    <view class="user2">
      <view class="user2-top">
        <view>我的订单</view>
        <view>全部订单</view>
      </view>
      <view class="user2-bottom">
        <view>
          <image src="../../static/支付.png"></image><br/>
          <text>待支付</text>
        </view>
        <view>
          <image src="../../static/分拣入库.png"></image><br/>
          <text>待配送</text>
        </view>
        <view>
          <image src="../../static/存货配送.png"></image><br/>
          <text>配送中</text>
        </view>
        <view>
          <image src="../../static/评价.png"></image><br/>
          <text>待评价</text>
        </view>
        <view>
          <image src="../../static/联系售后.png"></image><br/>
          <text>售后</text>
        </view>
      </view>
    </view>
   <!-- 盒子3 -->
   <view class="user3">
     <view class="user3-top">我的服务</view>
     <view class="user3-bottom">
       <view>
         <image src="../../static/积分2.png"></image><br/>
         <text>积分商城</text>
       </view>
       <view>
         <image src="../../static/收藏.png"></image><br/>
         <text>商品收藏</text>
       </view>
       <view>
         <image src="../../static/邀请有礼.png"></image><br/>
         <text>推荐有礼</text>
       </view>
       <view>
         <image src="../../static/助力.png"></image><br/>
         <text>助力免费拿</text>
       </view>
     </view>
   </view>
    <!--   盒子4 -->
   <view class="user4">
     <view class="user4-top">安全中心</view>
     <view class="user4-bottom">
       <view style="width: 100%;">
         <image src="../../static/客服.png"></image>
         <text>客服与帮助</text>
       </view>
       <view style="width: 100%;">
         <image src="../../static/地址.png"></image>
         <text>收货地址</text>
       </view>
       <view style="width: 100%;">
         <image src="../../static/设置.png"></image>
         <text>设置</text>
       </view>
     </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url:''
      }
    },
    methods: {
      chooseImg(){
        let t = this;
        uni.chooseImage({
          count:1,
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          	sourceType: ['album'], //从相册选择
          	success: function (res) {
          		console.log(JSON.stringify(res.tempFilePaths));
              t.url=res.tempFilePaths[0]
          	}
        })
      },
      // chooseLocation(){
      //   uni.getLocation({
      //   	type: 'wgs84',
      //   	success: function (res) {
      //   		console.log('当前位置的经度：' + res.longitude);
      //   		console.log('当前位置的纬度：' + res.latitude);
      //   	}
      //   });
      // }
    }
  }
</script>

<style lang="scss">
  .mine {
    padding-top: 80px;
    background-color: #F5F5F5;

    .user1 {
      width: 90%;
      margin: auto;
      border-radius: 20px;
      background-color: white;
      padding-bottom:20px;

      .head {
        padding-top: 20px;
        width: 85%;
        margin: auto;
        display: flex;
        justify-content: space-between;

        view:nth-child(1) {
          display: flex;
        }

        view:nth-child(2) {}
      }

      .center {
        margin-top:40px;
        background-color: #5CD190;
        border-radius: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: white;
      }
      .number{
        width:80%;
        margin:auto;
        .fix{
          display: flex;
          justify-content:space-between;
          margin-top:20px;
        }
      }
    }
    .user2{
      background-color: white;
      margin:auto;
      width:90%;
      border-radius: 20px;
      margin-top:10px;
      .user2-top{
        width:90%;
        margin:auto;
        display: flex;
        justify-content: space-between;
        padding-top:10px;
        view:nth-child(1){
          font-weight: bold;
          font-size:15px;
        }
      }
      .user2-bottom{
        padding-top:20px;
        width:85%;
        margin:auto;
        display: flex;
        justify-content: space-between;
        padding-bottom:10px;
        view{
          text-align: center;
          image{
            width: 35px;
            height:35px;
          }
          text{
            font-weight: bold;
            font-size: 13px;
          }
        }
      }
    }
    .user3{
      background-color: white;
      margin:auto;
      width:90%;
      border-radius: 20px;
      margin-top:10px;
      .user3-top{
        padding-top: 10px;
        font-weight: bold;
        font-size:15px;
        width:90%;
        margin:auto;
      }
      .user3-bottom{
        padding-top:20px;
        width:85%;
        margin:auto;
        display: flex;
        justify-content: space-between;
        padding-bottom:10px;
        view{
          text-align: center;
          image{
            width: 35px;
            height:35px;
          }
          text{
            font-weight: bold;
            font-size: 13px;
          }
        }
      }
    }
    .user4{
      background-color: white;
      margin:auto;
      width:90%;
      border-radius: 20px;
      margin-top:10px;
      .user4-top{
        padding-top: 10px;
        font-weight: bold;
        font-size:15px;
        width:90%;
        margin:auto;
      }
      .user4-bottom{
        width:90%;
        margin:auto;
        margin-top:10px;
        view{
          padding-bottom:10px;
          margin-bottom:15px;
          position:relative;
          text{
            margin-left:30px;
            font-weight: bold;
            font-size: 14px;
          }
          image{
            width:25px;
            height:25px;
            position: absolute;
            top:-3px;
            left:-5px;
          }
        }
      }
    }
  }
</style>